<template>
  <div class="home">
    <h1>home</h1>
    <p>{{ type }}</p>
    <ComponentsFilter :components="components" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ComponentsFilter from "@/bizCompoments/index.vue";
import { setData } from "@/utils/tools";

export default defineComponent<{
  $onGlobalStateChange: (fn: any) => void;
  $setGlobalState: (state: any) => void;
  onGlobalChange: (e: any) => void;
  type: string;
  components: any[];
}>({
  name: "Home",
  components: {
    ComponentsFilter,
  },
  data() {
    return {
      type: 1,
      components: [
        {
          type: "image",
          url: "https://img.txqn.huohua.cn/avatar/20211016249763608f414-104f-4fce-b477-de35da93a54d.jpg?imageView2/1/w/231/h/231/format/jpg/",
        },
      ],
    };
  },
  mounted() {
    console.log(this.components);
    setData(this).then((res) => {
      console.log("res: ", res);
    });
    this.$onGlobalStateChange(this.onGlobalChange);
    this.$setGlobalState({
      msg: "33222",
    });
  },
  methods: {
    onGlobalChange(e: any) {
      console.log("e: ", e);
      this.type = e.data;
    },
  },
});
</script>
